<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="租赁费用设置" name="first">
        <zulin />
      </el-tab-pane>
      <el-tab-pane label="退订规则设置" name="second">
        <tuiding />
      </el-tab-pane>
      <el-tab-pane label="项目配置" name="third">
        <xiangmu />
      </el-tab-pane>
      <el-tab-pane label="平台保险" name="insurance">
        <insurance
      /></el-tab-pane>
      <el-tab-pane label="查看场馆保险费用" name="queryInsurance">
        <queryInsurance
      /></el-tab-pane>
      <el-tab-pane label="小程序装修配置" name="appletsRens">
        <appletsRens />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup name="Oam/baseSetting">
import { getCurrentInstance, onMounted } from "@vue/runtime-core";
import { ref } from "vue";
import zulin from "./zulin";
import tuiding from "./tuiding";
import xiangmu from "./xiangmu";
import insurance from "./insurance";
import queryInsurance from "./queryInsurance";
import appletsRens from "./appletsRen";

const { proxy } = getCurrentInstance();
const activeName = ref("");

onMounted(() => {
  if (proxy.$route.query.tab) {
    activeName.value = proxy.$route.query.tab;
  } else {
    changeTab("first");
    activeName.value = "first";
  }
});

const changeTab = (tabName) => {
  const url = proxy.$route.href;
  let newUrl;
  if (url.indexOf("?") === -1) {
    newUrl = `${url}?tab=${tabName}`;
  } else {
    newUrl = `${url.substr(0, url.indexOf("?"))}?tab=${tabName}`;
  }
  window.history.replaceState("", "", newUrl);
};

function handleClick(tab, event) {
  changeTab(tab.paneName);
}
</script>

<style scoped></style>
